
<template>

    <div>
        <header>
			<!--页眉-->
			<div class="header">
				<div class="container">
					<p class="p14 col-md-6 col-xs-6 text-left">欢迎来到XXX宠物医院!</p>
					<P class="p14 col-md-6 col-xs-6 text-right"><span class="glyphicon glyphicon-earphone"></span>&nbsp;&nbsp;&nbsp;宠物咨询：XXX</P>
				</div>
			</div>

			<!--导航-->
			<nav class="nav_top">
				<div class="container">
					<div id="mynavbar" class="collapse navbar-collapse">
						<ul class="nav navbar-nav nav_li navbar-right">
							<li>
								<router-link to="/">首页</router-link>
							</li>
							<li>
								<router-link to="/about">关于我们</router-link>
							
								<router-link to="/product">医疗设施</router-link>
							</li>
							<li>
								<router-link to="/service">医疗服务</router-link>
							</li>

							<li>
								<router-link to="/news">宠物百科</router-link>
							</li>
							<li>
								<router-link to="/contact">联系我们</router-link>
							</li>
						</ul>
					</div>
				</div>
			</nav>
		</header>
   <div class="mint">     
    <mt-swipe :auto="4000" >
        <mt-swipe-item  v-for="(item,i) in shouye" :key="i"  ><img 
	:src="require(`../assets/images/${item.img}`)"></mt-swipe-item>

    </mt-swipe>
   </div>
		<!--我们理念-->
		<div class="idea">
			<div class="container">
				<div class="col-md-10">
					<p>我们的宠物服务更涵盖了宠物的衣食住行医疗等方面。</p>
					<span class="p14">our pet service covers the basic necessities of life care and other aspects of pet.</span>
				</div>
				<router-link class="col-md-2" to="/contact">立即咨询</router-link>
			</div>
		</div>

		<!--关于我们-->
		<div class="about">
			<div class="container">
				<div class="title">
					<img src="../assets/images/h_1.png" class="title_img">
					<div class="title_top">
						<h2>关于我们</h2>
						<span>About Us</span>
					</div>
					<img src="../assets/images/h_2.png" class="title_img">
				</div>
				<div class="ab">
					<img src="../assets/images/ab.jpg" class="col-md-6 img-circle">
					<div class="col-md-6">
						<p class="p14">
							XXX宠物医院 是一家专业的宠物医院，位于苏州园区青剑湖曼哈顿广场9-110。医院地处成熟商业区，功能区面积400平方米，分区合理、设施完善、国内先进工作流程。宠物医院成立于1998年隶属于医疗集团股份有限公司，全国共有近百家直营分院，分布于上海、广州、深圳、长沙。凭借阵容强大的专家团队、媲美港台的医疗设备、遵循规范、严谨的作业流程，每年为几十万只宠物提供高品质的服务。服务范围涵盖：宠物医疗保健、 美容造型、寄养、洗浴、SPA、食品及用品等。拥有一批高学历、临床经验丰富的宠物医师，其中硕士35人、博士2人，执业兽医师328人。有完善的宠物内科、心血管科、骨科、软组织外科、眼科、肿瘤科、牙科、皮肤科、影像科、猫科等科室，并在宠物骨科、眼科、肿瘤科、牙科、皮肤科等领域综合实力领跑全国。
						</p>
						<router-link to="/about">了解更多</router-link>
					</div>
				</div>
			</div>
		</div>
		<!--我们服务-->
		<div class="service">
			<div class="container">
				<div class="row">
					<div class="title">
						<img src="../assets/images/h_1.png" class="title_img">
						<div class="title_top">
							<h2>医疗服务</h2>
							<span>Medical Service</span>
						</div>
						<img src="../assets/images/h_2.png" class="title_img">
					</div>
					<img src="../assets/images/service.jpg" class="service_img1">
					
					<div class="service_top">
						<img src="../assets/images/gou.png" class="service_img">
						<div class="service_top1">
							<h4>宠物医疗</h4>
							<p class="p14">宠物的医疗保养也越来越受到大家的关注</p>
						</div>
						
						<div class="service_top2">
							<h4>宠物饮食</h4>
							<p class="p14">宠物的饮食和营养也越来越受到大家的关注</p>
						</div>
						<div class="service_top3">
							<h4>宠物寄养</h4>
							<p class="p14">因为宠物的种类多，各自的生活习性不同，对营养的需求也不尽相同</p>
						</div>
						<div class="service_top4">
							<h4>宠物美容</h4>
							<p class="p14">所谓的宠物美容就是借助美容用品和修剪技法和染色激发增添美感</p>
						</div>
						<div class="service_top5">
							<h4>宠物护理</h4>
							<p class="p14">让宠物的外观得到美化和环保变得更健康和时尚</p>
						</div>
						<div class="service_top6">
							<h4>宠物训练</h4>
							<p class="p14">让它觉得这段时间充满了乐趣，从而增强宠物与主人的感情</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--成功案例-->
		<diV class="case">
			<div class="container">
				<div class="row">
                       <div class="title">
						<img src="../assets/images/h_1.png" class="title_img">
						<div class="title_top">
							<h2>医疗设施</h2>
							<span>Medical Equipment</span>
						</div>
						<img src="../assets/images/h_2.png" class="title_img">
					</div>
				
				  <div class="mint1">     
   				  <mt-swipe :auto="4000" >
       				 <mt-swipe-item  v-for="(item,i) in sheshi" :key="i"  ><img 
						:src="require(`../assets/images/${item.img}`)"></mt-swipe-item>

   				 </mt-swipe>
   </div>
				
								
						
				</div>
			</div>
			<!--<div class="container">
				<div class="row">
					<div class="title">
						<img src="../assets//images/h_1.png" class="title_img">
						<div class="title_top">
							<h2>医疗设备</h2>
							<span>Medical Equipment</span>
						</div>
						<img src="../assets//images/h_2.png" class="title_img">
					</div>
					<ul class="col-md-12 case_top">
						<li class="col-md-3">
							
							     <img src="../assets//images/p1.jpg">
							
							<div>
								<p class="p14">犬肝硬化B超犬肝硬化B超犬肝硬化B超犬肝硬化B超犬肝硬化B超犬肝硬化B超</p>
								<a href="product.html">查看更多</a>
							</div>
						</li>
						<li class="col-md-3">
							<img src="../assets//images/p2.jpg">
							<div>
								<p class="p14">各种骨折治疗各种骨折治疗各种骨折折治疗各种骨折治疗各种骨折治疗</p>
								<a href="product.html">查看更多</a>
							</div>
						</li>
						<li class="col-md-3">
							<img src="../assets//images/p3.jpg">
							<div>
								<p class="p14">绝育并不可怕绝育并不可怕绝育并不可怕绝育并不可怕绝育并不可怕绝育并不可怕</p>
								<a href="product.html">查看更多</a>
							</div>
						</li>
						<li class="col-md-3">
							<img src="../assets//images/p4.jpg">
							<div>
								<p class="p14">膀胱结石B超图片膀胱结石B超图片片膀胱结石B超图片膀胱结石B超图片</p>
								<a href="product.html">查看更多</a>
							</div>
						</li>
						<li class="col-md-3">
							<img src="../assets//images/p5.jpg">
							<div>
								<p class="p14">肠道异物手术肠道异物手术肠道异物手术肠道异物手术肠道异物手术肠道异物手术</p>
								<a href="product.html">查看更多</a>
							</div>
						</li>
						<li class="col-md-3">
							<img src="../assets//images/p6.jpg">
							<div>
								<p class="p14">犬子宫蓄脓犬子宫蓄脓犬子宫蓄脓犬子宫子宫蓄脓犬子宫蓄脓犬子宫蓄脓犬子宫蓄脓</p>
								<a href="product.html">查看更多</a>
							</div>
						</li>
						<li class="col-md-3">
							<img src="../assets//images/p7.jpg">
							<div>
								<p class="p14">比熊犬胃内异物比熊犬胃内异物比熊犬胃内异物比熊犬胃异物</p>
								<a href="product.html">查看更多</a>
							</div>
						</li>
						<li class="col-md-3">
							<img src="../assets//images/p8.jpg">
							<div>
								<p class="p14">结石X光片结石X光片结石X光片结石X光片结石X光片结石X光片</p>
								<a href="product.html">查看更多</a>
							</div>
						</li>
					</ul>
				</div>
			</div>-->
		</diV>
		<!--萌宠医疗-->
		<div>
			<div class="container-fluid">
				<div class="row">

					<div class="doctor_top">
						<img src="../assets/images/d1.png">
						<h3>— 医疗技术实力雄厚 —</h3>
						<p>拥有一批高学历、临床经验丰富的宠物医师，其中硕士35人、博士2人，执业兽医师328人。</p>
						<p>有完善的宠物内科、心血管科、骨科、软组织外科、眼科、</p>
						<p>肿瘤科、牙科、皮肤科、影像科、猫科等科室，并在宠物骨科、眼科、肿瘤科、牙科、皮肤科等领域综合实力领跑全国。</p>
					</div>
				</div>
			</div>
		</div>
		<!--萌宠资讯-->
		<diV class="news">
			<div class="container">
				<div class="title">
					<img src="../assets/images/h_1.png" class="title_img">
					<div class="title_top">
						<h2>宠物百科</h2>
						<span>Pet Encyclopedia</span>
					</div>
					<img src="../assets/images/h_2.png" class="title_img">
				</div>
				<div class="row">
					<div class="col-lg-5 col-md-5 col-sm-12 col-xs-12">
						<div id="news_slide" class="news_slide_box">
					<div class="mint1">     


   				  <mt-swipe :auto="4000" >
       				 <mt-swipe-item  v-for="(item,i) in chongwu" :key="i"  ><img 
						:src="require(`../assets/images/${item.img}`)"></mt-swipe-item>

   				 </mt-swipe>
 					</div>
						</div>
					</div>
					<div class="col-lg-7 col-md-7 col-sm-12 col-xs-12">
						<ul class="news_list">
							<li>
								<div class="news_pic col-lg-3 col-md-3 col-sm-4 col-xs-12">
							
								</div>
								<div class="col-lg-9 col-md-9 col-sm-8 col-xs-12">
									<router-link to="/service" class="news_tit">宠物切莫“所托非人”</router-link>
									<p class="news_time">2017-07-14</p>
									<p class="news_desc">当前，随着饲养宠物的家庭增多，许多与宠物相关行业的店铺应运而生。作为一个新兴的行业 </p>
								</div>
							</li>
							<li>
								<div class="news_pic col-lg-3 col-md-3 col-sm-4 col-xs-12">
									<router-link to="/service">
										<img src="../assets/images/news4.jpg" />
									</router-link>
								</div>
								<div class="col-lg-9 col-md-9 col-sm-8 col-xs-12">
									<router-link to="/service" class="news_tit">如何通过牙齿推断猫咪的年龄</router-link>
									<p class="news_time">2017-07-18</p>
									<p class="news_desc">猫咪的年龄，主要以犬牙齿的生长情况、齿峰及牙齿的磨损程度、外形、颜色等综合判定。</p>
								</div>
							</li>
							<li>
								<div class="news_pic col-lg-3 col-md-3 col-sm-4 col-xs-12">
									<router-link to="/service">
										<img src="../assets/images/news5.jpg" />
									</router-link>
								</div>
								<div class="col-lg-9 col-md-9 col-sm-8 col-xs-12">
									<router-link to="/service" class="news_tit">狗狗抑郁症的原因及解决办法</router-link>
									<p class="news_time">2017-07-17</p>
									<p class="news_desc">抑郁症这个词对于我们来说并不陌生，它是一种心理障碍。可是你知道吗？狗狗</p>
								</div>
							</li>
						</ul>
					</div>

				</div>
			</div>
		</diV>
		<!--团队风采-->
		<diV class="team">
			<div class="container">
				<div class="title">
					<img src="../assets/images/h_1.png" class="title_img">
					<div class="title_top">
						<h2>医疗团队</h2>
						<span>Medical Team</span>
					</div>
					<img src="../assets/images/h_2.png" class="title_img">
				</div>
			<router-link to="/about">
			   <div class="mint2">     
   				  <mt-swipe :auto="4000" >
       				 <mt-swipe-item  v-for="(item,i) in tuandui" :key="i"  ><img 
						:src="require(`../assets/images/${item.team_imge}`)"></mt-swipe-item>

   				 </mt-swipe>
			   </div>
  				 </router-link>	
					
				
				

			</div>
		</div>

		<!--联系我们-->
		<footer class="footer">
			<div class="container">
				<div class="b-nav wow fadeInUp" data-wow-delay=".1s">
								<router-link to="/">首页</router-link>
						
								<router-link to="/about">关于我们</router-link>
							
								<router-link to="/product">医疗设施</router-link>
					
								<router-link to="/service">医疗服务</router-link>
						
						
								<router-link to="/contact">联系我们</router-link>
				</div>
				<p class="wow fadeInUp jshu" data-wow-delay=".3s">Copyright © 2020 宠物医院 | XXX宠物医院</p>
				<p class="wow fadeInUp jshu" data-wow-delay=".5s">技术支持：&nbsp;&nbsp;&nbsp;
				</p>
			</div>
		</footer>
    </div>
</template>
		<script>
		export default{
			data(){
				return {
					shouye:[],
					sheshi:[],
					chongwu:[],
					tuandui:[]
					

				}
			},
			methods:{
				loadNavItems(){
					this.axios.get('/index/big_carousel').then(res=>{
						console.log(res);
						this.shouye=res.data.result;
					
					})
				},	
				loadNavItems1(){
					this.axios.get('/index/small_carousel').then(res=>{
						console.log(res);
						this.chongwu=res.data.result;
					
					})
				},					     

				loadNavItemss(){
					this.axios.get('index/pet_facilities').then(res=>{
						console.log(res);
						this.sheshi=res.data.result;
					})
				},
				loadNavItemss1(){
					this.axios.get('about/pet_team').then(res=>{
						console.log(res);
						this.tuandui=res.data.result;
					})
				}				
				
			},
			
			
			mounted(){
				this.loadNavItems();
				this.loadNavItems1();
				this.loadNavItemss();
				this.loadNavItemss1();

			}

		}

		</script>
        <style>
		.mint{
			width: 370px;
            height: 200px;
        }
		.mint img{
			width: 100%;
			height: 100%;
		}
        .mint1{
			
            height: 346px;
        }
		.mint2{
			position: relative ;
  			left: 30px;
			bottom: 10px;
			height: 272px;
		}
        </style>
        